light mode
night mode
অ্যাজাক্স (Ajax)

POST Request এর মাধ্যমে ডেটা পাঠানো

Web Development - অ্যাজাক্স (Ajax) - Ajax এর মাধ্যমে GET এবং POST Request (GET এবং POST Request Handling with Ajax) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax এর মাধ্যমে POST রিকোয়েস্ট ব্যবহার করে ডেটা পাঠানো হয় যখন ক্লায়েন্ট থেকে সার্ভারে ডেটা সাবমিট বা আপডেট করতে হয়। POST রিকোয়েস্ট সাধারণত ফর্ম ডেটা, JSON ডেটা, বা অন্য কোনো কাস্টম ডেটা সার্ভারে পাঠানোর জন্য ব্যবহৃত হয়। এটি GET রিকোয়েস্টের তুলনায় বেশি নিরাপদ, কারণ ডেটা URL এর পরিবর্তে রিকোয়েস্টের বডিতে পাঠানো হয়। নিচে POST রিকোয়েস্টের মাধ্যমে ডেটা পাঠানোর একটি পূর্ণাঙ্গ উদাহরণ এবং এর ব্যাখ্যা দেওয়া হলো:

উদাহরণ: POST Request এর মাধ্যমে ডেটা পাঠানো

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST Request Example</title>
</head>
<body>
    <h1>Send Data Using POST Request</h1>
    <form id="data-form">
        <input type="text" id="title" placeholder="Title" required />
        <textarea id="body" placeholder="Body" required></textarea>
        <button type="button" onclick="sendData()">Submit</button>
    </form>
    <div id="response-container">
        <!-- সার্ভার রেসপন্স এখানে দেখানো হবে -->
    </div>

    <script src="app.js"></script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

  • এখানে একটি HTML ফাইল তৈরি করা হয়েছে যেখানে একটি শিরোনাম (<h1>), একটি ফর্ম (<form>), এবং একটি <div> এলিমেন্ট রয়েছে।
  • ফর্মটিতে দুটি ইনপুট ফিল্ড (<input> এবং <textarea>) রয়েছে যেখানে ইউজার ডেটা প্রবেশ করতে পারে।
  • "Submit" বোতামটিতে একটি onclick ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়েছে, যা sendData() ফাংশন কল করবে এবং POST রিকোয়েস্ট পাঠাবে।
  • response-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে POST রিকোয়েস্টের রেসপন্স দেখানো হবে।

JavaScript (app.js):

function sendData() {
    // ইনপুট ফিল্ড থেকে ডেটা সংগ্রহ করা
    var title = document.getElementById("title").value;
    var body = document.getElementById("body").value;

    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // POST রিকোয়েস্ট ওপেন করা
    xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
    
    // কনটেন্ট টাইপ সেট করা (JSON ডেটা পাঠানোর জন্য)
    xhr.setRequestHeader("Content-Type", "application/json");
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা তা চেক করা
            if (xhr.status === 201) { // রিকোয়েস্ট সফল হয়েছে কিনা তা চেক করা (201 মানে রিসোর্স তৈরি হয়েছে)
                var responseData = JSON.parse(xhr.responseText); // JSON রেসপন্স প্রসেস করা
                document.getElementById("response-container").innerHTML = `
                    <h3>Response:</h3>
                    <p>ID: ${responseData.id}</p>
                    <p>Title: ${responseData.title}</p>
                    <p>Body: ${responseData.body}</p>
                `;
            } else {
                // যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
                document.getElementById("response-container").innerHTML = "Error sending data!";
            }
        }
    };
    
    // JSON ডেটা তৈরি করা এবং রিকোয়েস্ট পাঠানো
    var data = JSON.stringify({ title: title, body: body });
    xhr.send(data);
}

বিস্তারিত ব্যাখ্যা:

১. ইনপুট ডেটা সংগ্রহ করা:

  • sendData() ফাংশনে ইনপুট ফিল্ড থেকে ডেটা সংগ্রহ করা হয়েছে (title এবং body)।

২. XMLHttpRequest অবজেক্ট তৈরি করা:

  • একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা POST রিকোয়েস্ট পরিচালনা করবে।

৩. রিকোয়েস্ট ওপেন করা:

  • xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true); মেথড ব্যবহার করে একটি POST রিকোয়েস্ট সেটআপ করা হয়েছে।
  • "POST" মেথড ব্যবহার করা হয়েছে, কারণ আমরা সার্ভারে ডেটা পাঠাচ্ছি।
  • "https://jsonplaceholder.typicode.com/posts" URL যেখানে ডেটা পাঠানো হবে।
  • true মানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চলবে।

৪. রিকোয়েস্ট হেডার সেট করা:

  • xhr.setRequestHeader("Content-Type", "application/json"); মেথড ব্যবহার করে রিকোয়েস্ট হেডার সেট করা হয়েছে, যাতে সার্ভার জানে আমরা JSON ডেটা পাঠাচ্ছি।

৫. রেসপন্স হ্যান্ডলিং:

  • xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 201)।
  • 201 স্ট্যাটাস কোড নির্দেশ করে যে রিকোয়েস্ট সফল এবং সার্ভারে নতুন রিসোর্স তৈরি হয়েছে।
  • সফল হলে JSON ডেটা প্রসেস করে HTML ডকুমেন্টে (response-container ডিভে) আপডেট করা হয়েছে।
  • ব্যর্থ হলে একটি এরর মেসেজ দেখানো হয়েছে।

৬. রিকোয়েস্ট পাঠানো:

  • JSON ফরম্যাটে ডেটা তৈরি করা হয়েছে এবং xhr.send(data) মেথডের মাধ্যমে রিকোয়েস্টটি সার্ভারে পাঠানো হয়েছে।

সার্ভার রেসপন্স:

এই উদাহরণে, আমরা একটি ডেমো API (https://jsonplaceholder.typicode.com/posts) ব্যবহার করেছি, যা POST রিকোয়েস্টে নতুন রিসোর্স তৈরি করে। এটি সাধারণত নিচের মতো JSON রেসপন্স প্রদান করে:

{
    "id": 101,
    "title": "Sample Title",
    "body": "This is a sample body text."
}

প্রোগ্রামটি কীভাবে কাজ করে:

  1. ইউজার যখন "Submit" বোতামটি ক্লিক করে, তখন sendData() ফাংশন কল হয়।
  2. ফাংশনটি ইনপুট ফিল্ড থেকে ডেটা নিয়ে একটি POST রিকোয়েস্ট পাঠায় এবং সার্ভারে JSON ডেটা সাবমিট করে।
  3. রেসপন্স পাওয়ার পর, তা HTML পেজে ইনজেক্ট করা হয়, ফলে ইউজার নতুন রিসোর্স তৈরি হওয়ার ডেটা দেখতে পারে।

সারসংক্ষেপ:

  • POST রিকোয়েস্ট: Ajax POST রিকোয়েস্ট ব্যবহার করে ক্লায়েন্ট থেকে সার্ভারে ডেটা পাঠানো হয়, বিশেষ করে যখন ডেটা সাবমিশন বা রিসোর্স তৈরি করার প্রয়োজন হয়।
  • JSON ডেটা: POST রিকোয়েস্টে JSON ফরম্যাটে ডেটা পাঠানো হয়েছে এবং Content-Type হেডার সেট করা হয়েছে।
  • অ্যাসিনক্রোনাস অপারেশন: Ajax POST রিকোয়েস্ট অ্যাসিনক্রোনাসভাবে কাজ করে, ফলে পেজ প্রতিক্রিয়াশীল থাকে এবং রেসপন্স পাওয়ার পর HTML ডায়নামিকভাবে আপডেট হয়।
  • রেসপন্স হ্যান্ডলিং: readyState এবং status চেক করে POST রিকোয়েস্ট সফল হলে ডেটা প্রসেস এবং DOM আপডেট করা হয়।

এই ধাপগুলো অনুসরণ করে আপনি সহজেই Ajax POST রিকোয়েস্ট ব্যবহার করে সার্ভারে ডেটা পাঠাতে পারেন এবং আপনার ওয়েব পেজে ডায়নামিক কন্টেন্ট আপডেট করতে পারেন।

আরও দেখুন...

POST Request এর মাধ্যমে ডেটা পাঠানো

or

Don't have an account? Register

Promotion